<template>
  <div>
    <!-- 步骤条 -->
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1" description="添加商品信息"></el-step>
      <el-step title="步骤 2" description="上传海报"></el-step>
      <!-- <el-step title="步骤 3" description="上传商品图片"></el-step> -->
    </el-steps>
    <!-- 添加商品信息 -->
    <div v-show="addinfo">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.p_name"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="form.p_number"></el-input>
        </el-form-item>
        <el-form-item label="指导价">
          <el-input v-model="form.p_importPrice"></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="form.p_sellPrice"></el-input>
        </el-form-item>
        <el-form-item label="上架时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="能源类型选择">
          <el-select v-model="form.p_energy_id" placeholder="请选择能源类型">
            <el-option :label="en.en_nickname" :value="en.en_id" v-for="en in energy" :key="en.en_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环保类型">
          <el-select v-model="form.p_protect_id" placeholder="环保类型">
            <el-option :label="pr.pr_name" :value="pr.pr_id" v-for="pr in protect" :key="pr.pr_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最大功率">
          <el-input v-model="form.p_kw"></el-input>
        </el-form-item>
        <el-form-item label="最大扭矩">
          <el-input v-model="form.p_nm"></el-input>
        </el-form-item>
        <el-form-item label="发动机介绍">
          <el-input v-model="form.p_fdj"></el-input>
        </el-form-item>
        <el-form-item label="变速箱">
          <el-input v-model="form.p_bs"></el-input>
        </el-form-item>
        <el-form-item label="长宽高">
          <el-input v-model="form.p_ckg"></el-input>
        </el-form-item>
        <el-form-item label="车身结构">
          <el-input v-model="form.p_cg"></el-input>
        </el-form-item>
        <el-form-item label="最高速度">
          <el-input v-model="form.p_km"></el-input>
        </el-form-item>
        <el-form-item label="官方0-100km/h加速(s)">
          <el-input v-model="form.p_s"></el-input>
        </el-form-item>
        <el-form-item label="整车质保">
          <el-input v-model="form.p_zp"></el-input>
        </el-form-item>
        <el-form-item label="商品(汽车类型)种类">
          <el-input v-model="form.p_productNumber"></el-input>
        </el-form-item>
        <el-form-item label="商品归类(级别)">
          <el-select v-model="form.p_classify_id" placeholder="商品归类(级别)">
            <el-option :label="c.c_nickname" :value="c.c_id" v-for="c in classify" :key="c.c_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品详情">
          <el-input v-model="form.p_particular"></el-input>
        </el-form-item>
        <el-form-item label="请选择店铺">
          <el-select v-model="form.p_s_id" placeholder="请选择店铺">
            <el-option :label="s.s_name" :value="s.s_id" v-for="s in shop" :key="s.s_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择厂家">
          <el-select v-model="form.p_m_id" placeholder="请选择厂家">
            <el-option :label="man.m_name" :value="man.m_id" v-for="man in manufacturer" :key="man.m_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
          <el-button type="primary" @click="onSubmit">立即添加</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 上传海报 -->
    <div v-show="haibao">
      <form action="http://localhost:3000/product" enctype="multipart/form-data" method="post">
        <input type="text" name="ca_p_id">
        <div style="margin:10px 0;">
          选择要上传的图片：
          <input type="file" name="pic" required>
        </div>
        <div>
          <input type="submit" value="提交" class="btn btn-primary">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return {
      date1: '',
      date2: '',
      form: {
        p_name: '',
        p_number:'',
        p_importPrice:"",
        p_sellPrice:'',
        p_energy_id:'',
        p_protect_id:'',
        p_kw:'',
        p_nm:'',
        p_fdj:'',
        p_bs:'',
        p_ckg:'',
        p_cg:'',
        p_km:'',
        p_s:'',
        p_zp:'',
        p_productNumber:'',
        p_classify_id:'',
        p_particular:'',
        p_s_id:'',
        p_m_id:'',
      },
      // 能源类型
      energy:[],
      protect:[],
      classify:[],
      shop:[],
      manufacturer:[],
      // 步骤条
      active: 0,
      addinfo:true,
      haibao:false,
    }
  },
  methods:{
    onSubmit() {
      // 格式化时间
      this.form.data1 = moment(this.data1).format("YYYY-MM-DD");
      this.form.data2 = moment(this.data2).format("YYYY-MM-DD HH:mm:ss");
      this.$ajax({
        url:"after/products",
        method:"post",
        data:this.form
      }).then(resp=>{
        console.log(resp.data);
      })
      alert("添加成功");
      this.addinfo = false;
      this.haibao = true;
      this.active++
    },
    goBack() {
      this.$router.push("/")
    },
    init(){
      // 加载能源
      this.$ajax({
        url:"after/energy",
        method:"get",
        params:{currentsize:1,pagesize:10}
      }).then(resp=>{
        let energyobj = resp.data.message;
        energyobj.forEach((item,i)=>{
          if(item.en_status==0){
            energyobj.splice(i,1);
          }
        })
        this.energy = energyobj
      })
      // 能源类型
      this.$ajax({
        url:"after/protect",
        method:"get",
        params:{currentsize:1,pagesize:10}
      }).then(resp=>{
        let protectobj = resp.data.message;
        protectobj.forEach((item,i)=>{
          if(item.pr_status==0){
            protectobj.splice(i,1);
          }
        })
        this.protect = protectobj
      })
      // 商品归类(级别)
      this.$ajax({
        url:'after/classify',
        method:'get',
        params:{currentsize:1, pagesize:50}
      }).then(resp=>{
        let classi = resp.data.message;
        classi.forEach((item,i)=>{
          if(item.c_status==0){
            classi.splice(i,1);
          }
        })
        this.classify = classi;
      })
      // 店铺
      this.$ajax({
        url:"after/shop",
        method:"get",
        params:{currentsize:1, pagesize:20}
      }).then(resp=>{
        let shops = resp.data.message;
        shops.forEach((item,i)=>{
          if(item.s_status==0){
            shops.splice(i,1);
          }
        })
        this.shop = shops;
      })
      // 厂家
      this.$ajax({
        url:'after/manufacturer',
        method:"get",
        params:{currentsize:1, pagesize:50}
      }).then(resp=>{
        let manu = resp.data.message;
        manu.forEach((item,i)=>{
          if(item.mecredit==0){
            manu.splice(i,1);
          }
        })
        this.manufacturer = manu;
      })
    },
    // 步骤条
    next() {
      if (this.active++ > 2) this.active = 0;
    },
  },
  created(){
    this.init();
  }
}
</script>

<style scoped>

</style>